<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">订单列表</h4>
                <h6 class="card-subtitle">将数据导出为复制，CSV，Excel，PDF和打印</h6>
                <div id="order-list" class="table-responsive m-t-40">
                    <a class="btn btn-info" data-toggle="modal"
                       data-target="#myModal" href="#">添加订单</a>
                    <table id="example23" class="display nowrap table table-hover table-striped table-bordered"
                           cellspacing="0" width="100%">
                        <thead>
                        <tr>
                            <th>订单编号</th>
                            <th>用户编号</th>
                            <th>收货地址</th>
                            <th>收货姓名</th>
                            <th>联系方式</th>
                            <th>订单总额</th>
                            <th>订单状态</th>
                            <th>下单时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="item in orders">
                            <td>{{item.o_id}}</td>
                            <td>{{item.u_id}}</td>
                            <td>{{item.address}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.tel}}</td>
                            <td>{{item.money}}</td>
                            <td>{{item.times}}</td>
                            <td>{{item.status}}</td>
                            <td>
                                <a class="btn btn-success" href="#">查看</a>
                                <a class="btn btn-primary" href="#">编辑</a>
                                <a class="btn btn-danger" href="#">删除</a>
                            </td>

                        </tr>

                        </tbody>
                    </table>
                </div>
            </div>

        </div>

    </div>
</div>
<!--新增订单-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="card">
                <div class="card-title px-3 pt-3">新增订单信息</div>
                <div class="card-subtitle px-3">添加订单信息</div>
                <div class="card-body">
                    <form class="form-material" enctype="multipart/form-data">
                        <div class="form-group">
                            <label>订单编号：</label>
                            <input type="text" name="o_id" class="form-control">
                        </div>

                        <div class="form-group">
                            <label>用户：</label>
                            <select name="u_id" class="form-control" id="user-list">
                                <option v-for="item in users" :value="item.id">{{item.id}} - {{item.name}}</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label>收货地址：</label>
                            <input type="text" name="address" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>收货人：</label>
                            <input type="text" name="name" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>联系方式：</label>
                            <input type="text" name="tel" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>订单总额：</label>
                            <input type="number" name="money" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>订单状态：</label>
                            <input type="text" name="status" class="form-control" value="0">
                        </div>
                        <div>
                            <button class="btn btn-primary"><i class="fa fa-save"></i> 保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        $.getJSON("http://localhost:8080/order", function (dto) {
            new Vue({
                el: "#order-list",
                data: {
                    orders: dto.data
                }
            })
        });
        $.getJSON("http://localhost:8080/user", function (dto) {
            new Vue({
                el: "#user-list",
                data: {
                    users: dto.data
                }
            })
        });
        $('#example23').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'print'
            ]
        });
    });

    $(document).ready(function () {
        $('#myTable').DataTable();
        $(document).ready(function () {
            var table = $('#example').DataTable({
                "columnDefs": [{
                    "visible": false,
                    "targets": 2
                }],
                "order": [
                    [2, 'asc']
                ],
                "displayLength": 25,
                "drawCallback": function (settings) {
                    var api = this.api();
                    var rows = api.rows({
                        page: 'current'
                    }).nodes();
                    var last = null;
                    api.column(2, {
                        page: 'current'
                    }).data().each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');
                            last = group;
                        }
                    });
                }
            });
            // Order by the grouping
            $('#example tbody').on('click', 'tr.group', function () {
                var currentOrder = table.order()[0];
                if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                    table.order([2, 'desc']).draw();
                } else {
                    table.order([2, 'asc']).draw();
                }
            });
        });
    });
    $(function () {
        // 为所有 type="file" 的 input，设置预览
        $(":file").change(function () {
            var targetName = $(this).data("img");

            //使用这个方法来临时创建一个文件的链接，参数是一个file或者blob
            var path = URL.createObjectURL(this.files[0]);

            //将链接赋值给上面的图片src路径
            $(targetName).prop("src", path)
        });

        $("form").submit(function () {
            var data = new FormData(this);  // 传递的数据

            $.ajax({
                url: "http://localhost:8080/order",
                data: data,
                type: "POST",
                processData: false,
                contentType: false,
                success: function (dto) {
                    //如果成功
                    if (dto.code == 1000) {
                        swal({
                            title: "添加成功",
                            type: "success",
                            confirmButtonText: "确定"
                        })
                    } else {
                        swal({
                            title: "添加失败",
                            text: dto.msg,
                            type: "error",
                            confirmButtonText: "确定"
                        })
                    }
                }
            });

            return false;
        });
    });
</script>